<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>视频解析工具</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<style>
.videobox{ width: 100%; background-color: #000; }
.form { margin: 25px 0; }
.btn-submit { width: 100%; }

@media (min-width: 768px) {
    .container {
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    .input-group-addon,
    .input-group .form-control:last-child,
    .input-group select.form-control {
        border-radius: 0;
    }

    .input-group-addon { border-left: 0; }
    .input-group .form-control:last-child { border-right: 0; }
    .btn,
    .btn-group-lg>.btn, .btn-lg { border-radius: 0; }
}
</style>

<div class="container">
	<div class="row">

		<div class="form">
            <div class="form-group form-group-lg has-success">
                <label class="sr-only" for="api-url">API 接口</label>
                <div class="input-group">
                    <div class="input-group-addon">解析接口</div>
                    <select class="form-control" id="api-url">
                        <!-- <option rel="nofollow" value="http://www.vipjiexi.com/yun.php?url=" selected>1号解析工具【推荐】</option> -->
                        <option rel="nofollow" value="http://www.chepeijian.cn/jiexi/vip.php?url=">2号解析工具</option>
                        <option rel="nofollow" value="http://api.47ks.com/webcloud/?v=">3号解析工具</option>
                        <option rel="nofollow" value="http://yun.mt2t.com/yun?url=">4号解析工具</option>
                    </select>
                </div>
            </div>
            <div class="form-group form-group-lg has-success">
                <label class="sr-only" for="exampleInputAmount">视频地址</label>
                <div class="input-group">
                    <div class="input-group-addon">视频地址</div>
                    <input type="text" class="form-control" id="video-url" value placeholder="请输入 以 https:// 开头的网址">
                </div>
            </div>
            <button type="submit" class="btn btn-lg btn-primary btn-submit" onclick="videoParser()">解析视频</button>
		</div>

        <div class="videobox">
            <iframe src="" id="player" width="100%" height="400px" allowtransparency="true" frameborder="0" scrolling="no"></iframe>
        </div>

    </div>
</div>

<script>
var api         = document.getElementById("api-url");
var player      = document.getElementById("player");
var videoWidth  = document.body.clientWidth;
var videoHeight = videoWidth * 9 / 16;

function videoParser() {
    var vUrl = document.getElementById("video-url").value;
    console.log(vUrl);
    var a = api.selectedIndex;
	var b = api.options[a].value;
	player.src = b + vUrl;
    console.log(player.src);
}

player.style.width = videoWidth + 'px';
player.style.height = Math.ceil(videoHeight) + 'px';
</script>
</body>
</html>
